<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<!-- 如果 Vue实例的data属性flag 为真，则插入元素，否则移除元素  -->
			<span v-if="flag">你看见我了</span>
			
			<!-- href 是参数，表示 v-bind 指令将该元素的 href属性 与表达式 url 的值绑定 -->
			<a v-bind:href="url">网上搜索一下</a>
			
			<!-- click 是要监听的事件名，表示当鼠标点击的时候，调用Vue实例中定义的函数 clickBtn -->
			<button v-on:click="clickBtn">点一下</button>
			
			<!-- 此处如果Vue实例中data的attributename属性值为 href ，那么久相当于 v-bind:href -->
			<!-- 注意，此处 attributename 不能使用驼峰命名，最好全部使用小写，因为浏览器会把 attribute 名全部强制转为小写从而导致无法与 data 中的属性匹配上-->
			<a v-bind:[attributename]="url"> ... </a>
			
			<!-- 如果Vue实例中data的eventname属性值为 click ，那么久相当于 v-bind:click -->
			<button v-on:[eventname] = "dosome">测试一下</button>
			
			
		</div>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: '#root',
				data: {
					attributename: 'href',
					flag: false,
					url: 'https://www.baidu.com',
					eventname: 'click'
					
				},
				// Vue实例中的方法
				methods: {
					clickBtn(){
						console.log("Hello , Vue")
					},
					dosome(){
						console.log("做点啥呢？")
					}
				}
			})
			
		</script>
	</body>
</html>